<template>
    <div>

        <span>查看 </span>
        <el-input-number size='mini' v-model="days" :min="7" :max="50" label="描述文字"></el-input-number>
        <span> 天内数据</span>
        <el-button type="success" @click='getDefaultAmountData' icon="el-icon-search"
                   style="position: relative;left: 13px;margin: 5px;">获取
        </el-button>
        <div class="container">

            <div class="schart-box">
                <schart class="schart" canvasId="line" :options="options"></schart>
            </div>
        </div>
    </div>
</template>

<script>
    import Schart from 'vue-schart';

    export default {
        name: 'DayAmountStatistics',
        components: {
            Schart
        },
        data() {
            return {
                loginRole: localStorage.getItem('loginRole'),
                days: 7,
                dataList: [], //从后端获取的统计数据
                options: {
                    type: 'line',
                    title: {
                        text: '最近几个月各品类销售趋势图'
                    },
                    bgColor: '#fbfbfb',
                    labels: [],
                    datasets: [
                        {
                            label: '',
                            data: []
                        }

                    ]
                }
            }

        },
        created() {
            this.getDefaultAmountData();
        },
        methods: {
            //获取统计数据
            getDefaultAmountData() {
                console.log(this.days)
                const _this = this;
                if (this.loginRole === 'admin') {
                    this.$http.get('dev-api/admin/order/amountLine/' + this.days)
                        .then(function (resp) {
                            if (resp.data.code === 0) {
                                _this.dataList = resp.data.data;
                                _this.getAmountXY();
                                _this.$message.success("获取数据成功")
                            } else {
                                _this.$message.error(resp.data.msg)
                            }
                        })
                } else {
                    this.$http.get('dev-api/seller/order/amountLine/' + this.days)
                        .then(function (resp) {
                            if (resp.data.code === 0) {
                                _this.dataList = resp.data.data;
                                //将数据解析到X和Y轴上
                                _this.getAmountXY();
                                _this.$message.success("获取数据成功")
                            } else {
                                _this.$message.error(resp.data.msg)
                            }
                        })
                }

            },
            //获取xy轴的数据
            getAmountXY() {
                console.log('xy:' + this.days)
                let dataX = [];
                let dataY = [];
                for (let i = 0; i < this.dataList.length; i++) {
                    dataX.push(this.dataList[i].date);
                    dataY.push(this.dataList[i].amount);
                }
                if (this.loginRole === 'admin') {
                    this.options.title.text = "所有店铺最近" + this.days + "天内日销售额统计(单位：元)";
                } else {
                    this.options.title.text = "本店铺最近" + this.days + "天内日销售额统计(单位：元)";
                }
                this.options.labels = dataX;
                this.options.datasets[0].data = dataY;
            },
        }
    };
</script>

<style scoped>
    .schart-box {
        display: inline-block;
        margin: 20px;
    }

    .schart {
        width: 1000px;
        height: 500px;
    }

    .content-title {
        clear: both;
        font-weight: 400;
        line-height: 50px;
        margin: 10px 0;
        font-size: 22px;
        color: #1f2f3d;
    }
</style>